import React from 'react'
import { useNavigate, useParams } from 'react-router-dom'

interface ExaminationReportDetail {
  id: number
  title: string
  patientName: string
  patientGender: string
  patientAge: number
  referringDoctor: string
  referringDepartment: string
  referralTime: string
  reportTime: string
  reportCategory: string
  examinationResults: string
  diagnosisOpinion: string
  examiner: string
  reviewer: string
  note: string
}

function ExaminationReportDetail() {
  const navigate = useNavigate()
  const { id } = useParams<{ id: string }>()

  // 模拟数据
  const reportDetail: ExaminationReportDetail = {
    id: parseInt(id || '1'),
    title: '双肾及肾血管彩色多普勒',
    patientName: '王小柯',
    patientGender: '女',
    patientAge: 28,
    referringDoctor: '王小小',
    referringDepartment: '门诊放射科',
    referralTime: '2020-01-01 10:20:36',
    reportTime: '2020-01-20 20:20:30',
    reportCategory: '门诊/住院',
    examinationResults: '未查询出任何异常,注意饮食规律,生活作息调节',
    diagnosisOpinion: '双肺数枚实性小结节,考虑慢性炎性结节或硬结灶,请随访。',
    examiner: '李医生',
    reviewer: '王医生',
    note: '此结果仅作参考,以医院纸质报告为准'
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: '#f5f5f5',
      paddingTop: 'env(safe-area-inset-top)',
      paddingBottom: 'env(safe-area-inset-bottom)'
    }}>
      {/* 头部 */}
      <div style={{
        background: 'white',
        padding: '16px',
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <button 
          onClick={() => navigate(-1)} 
          title="返回"
          style={{
            background: 'none',
            border: 'none',
            fontSize: '20px',
            color: '#333',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}
        >←</button>
        <h1 style={{
          margin: 0,
          fontSize: '18px',
          fontWeight: '600',
          color: '#333'
        }}>检查报告详情</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>⋯</span>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>◎</span>
        </div>
      </div>

      {/* 报告标题和患者信息 */}
      <div style={{
        background: 'white',
        margin: '16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <h2 style={{
          margin: '0 0 16px 0',
          fontSize: '20px',
          fontWeight: '700',
          color: '#333',
          lineHeight: '1.4'
        }}>{reportDetail.title}</h2>
        
        <div style={{
          fontSize: '16px',
          color: '#333',
          marginBottom: '16px'
        }}>
          {reportDetail.patientName} {reportDetail.patientGender} {reportDetail.patientAge}岁
        </div>

        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '8px',
          fontSize: '14px',
          color: '#666'
        }}>
          <div>送检医师: {reportDetail.referringDoctor}</div>
          <div>送检科室: {reportDetail.referringDepartment}</div>
          <div>送检时间: {reportDetail.referralTime}</div>
          <div>报告时间: {reportDetail.reportTime}</div>
          <div>报告类别: {reportDetail.reportCategory}</div>
        </div>
      </div>

      {/* 检查结果 */}
      <div style={{
        background: 'white',
        margin: '0 16px 16px 16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <h3 style={{
          margin: '0 0 16px 0',
          fontSize: '18px',
          fontWeight: '600',
          color: '#333'
        }}>检查结果</h3>
        <div style={{
          fontSize: '16px',
          lineHeight: '1.8',
          color: '#333',
          textAlign: 'justify'
        }}>
          {reportDetail.examinationResults}
        </div>
      </div>

      {/* 诊断意见 */}
      <div style={{
        background: 'white',
        margin: '0 16px 16px 16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <h3 style={{
          margin: '0 0 16px 0',
          fontSize: '18px',
          fontWeight: '600',
          color: '#333'
        }}>诊断意见</h3>
        <div style={{
          fontSize: '16px',
          lineHeight: '1.8',
          color: '#333',
          textAlign: 'justify'
        }}>
          {reportDetail.diagnosisOpinion}
        </div>
      </div>

      {/* 签名和备注 */}
      <div style={{
        background: 'white',
        margin: '0 16px 16px 16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: '16px',
          fontSize: '14px',
          color: '#666'
        }}>
          <span>检测人: {reportDetail.examiner}</span>
          <span>审核人: {reportDetail.reviewer}</span>
        </div>
        <div style={{
          fontSize: '14px',
          color: '#999',
          padding: '12px',
          background: '#f8f9fa',
          borderRadius: '8px',
          borderLeft: '4px solid #1677ff'
        }}>
          备注: {reportDetail.note}
        </div>
      </div>

      {/* 检查影像 */}
      <div style={{
        background: 'white',
        margin: '0 16px 16px 16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <h3 style={{
            margin: 0,
            fontSize: '18px',
            fontWeight: '600',
            color: '#333'
          }}>检查影像</h3>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            color: '#999',
            fontSize: '14px',
            cursor: 'pointer'
          }}>
            <span>申请影像复印(未开通)</span>
            <span style={{ fontSize: '12px' }}>›</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ExaminationReportDetail
